<template>
	<view class="items borderbox pl36 pr30">
		<!-- 姓名班级部分 -->
		<view class="dflex alc namebox jcsb pt40">
			<view class="fs28 fw500 color666">{{ data.name }}</view>
			<view class="fs28 fw500 color666">|</view>
			<view class="fs28 fw500 color666">{{ data.classes }}</view>
		</view>
		<!-- 手机号 -->
		<view class="fs28 fw500 color666 pt10">{{ data.phone }}</view>
		<!-- 家长买牛奶的数组 -->
		<view v-for="(item, index) in data.milkArr" :key="index" class="dflex jcsb pt40 alc">
			<!-- 左边图片内容 -->
			<view class="leftImg dflex alc">
				<image :src="item.img" mode="widthFix"></image>
				<view class="pl50">
					<view class="fs30 fw900 color">{{ item.milk }}</view>
					<view class="fs22 fw500 gray mt8">{{ item.size }}</view>
				</view>
			</view>
			<!-- 右边规格的数量 -->
			<view class="fs28 fw500 gray pr40">×{{ item.num }}</view>
		</view>
		<!-- 按钮部分 -->
		<view class="mt40 pl10 fs28 fw500 color dflex alc jcsb">
			<!-- 合计 -->
			<view>合计：{{ sum }}</view>
			<view class="btn white textc">确认送达</view>

		</view>
	</view>
</template>

<script>
export default {
	name: 'OrderItem',
	props: ['data'],
	data() {
		return {};
	},
	mounted() {},
	computed: {
		sum() {
			return this.data.milkArr.reduce((sum, el) => {
				return el.num + sum;
			}, 0);
		}
	}
};
</script>

<style lang="scss" scoped>
.items {
	width: 706rpx;
	height: 566rpx;
	background-image: url('../.././images/orderbg.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin-bottom: 30rpx;
}
.namebox {
	width: 250rpx;
}
.row {
	height: 25rpx;
	width: 3rpx;
	background-color: #666;
}
.leftImg {
	image {
		width: 90rpx;
		height: 90rpx;
	}
}
.btn{
	width: 160rpx;
	height: 76rpx;
	line-height: 76rpx;
	background: linear-gradient(90deg, #8092EB 0%, #4151DB 100%);
	border-radius: 100rpx 100rpx 100rpx 100rpx;
	opacity: 1;
}
</style>
